<template>
  <view class="mycheckwork">
    <view class="calendars">
      <uv-calendars
        v-if="list && list.length"
        :insert="true"
        :date="selecteTime"
        :selected="list"
        :showMonth="false"
        @month="monthChange"
        @change="confirm"
      />
    </view>
    <view class="legend">
      <view class="legendItem" v-for="item in legend" :key="item.id">
        <view class="dot" :style="{ background: item.color }"></view>
        <text class="text">{{ item.name }}</text>
      </view>
    </view>
    <!-- 打卡记录 -->
    <div class="checkList">
        <div class="itemState" style="margin-bottom: 30rpx;" v-for="item,index in rulelog" :key="index" v-show="item.status != 3">
            <itemState :item="item" />
        </div>
    </div>
  </view>
</template>

<script>
import carState from "./state.vue";
import { uploadFile } from '@/api/home'
import itemState from './itemState.vue'
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
import {
  replacementList,
  replacementClock,
  getAttendanceLogDetail,
  getMonthAttendStatus,
  getAttendanceRule,
  getErrorAttendance,
} from "@/api/attendace.js";
export default {
  components: {
    carState,
    itemState,
  },
  data() {
    const d = new Date();
    const year = d.getFullYear();
    let month = d.getMonth() + 1;
    month = month < 10 ? `0${month}` : month;
    const date = d.getDate();
    return {
      list: [],
      selecteTime: dayjs().format('YYYY-MM-DD'),
      selectMonths: [],
      selected: [
        {
          date: `${year}-${month}-02`,
          info: "签到",
          badge: true,
          infoColor: "#ff0000",
        },
        // { date: `${year}-${month}-06`, info: '余10', infoColor: '#19be6b', topinfo: '￥100', topinfoColor: '#19be6b' }
      ],
      rulelog: [],
      statusColor: {
        1: "#19B36E",
        2: "#19B36E",
        3: "#F79009",
        4: "#195EB3",
        5: "#19B36E",
        6: "#F95555"
      },
      legend: [
        {
          name: "Normal",//正常
          id: 0,
          color: "#19B36E",
        },
        {
          name: "Be late",//迟到
          id: 1,
          color: "#F95555",
        },
        {
          name: "Ask for leave",//请假
          id: 2,
          color: "#195EB3",
        },
        {
          name: "Lack of timecard",//缺勤
          id: 3,
          color: "#F79009",
        },
      ],
    };
  },
  created() {
    this.getlist();
    this.getAttendanceLogList()
  },
  /**
   *
   */
  methods: {
    async getlist(date = dayjs().format('YYYY-MM')) {
      this.selectMonths.push(date);
      let list = await getMonthAttendStatus({date: date});
      list.map((ele) => {
        this.list.push({
          ...ele,
          badge: true,
          date: dayjs(ele.date).format('YYYY-MM-DD'),
          disable: false,
          infoColor: this.statusColor[ele.status] || "#F79009",
        })
      });
      console.log("getlist", this.list);
    },
    getAttendanceLogList() {
        getAttendanceLogDetail({date: this.selecteTime}).then(res => {
            this.rulelog = res.log
        })
    },
     confirm(e) {
      this.selecteTime = e.fulldate;
      console.log("confirm", e);
      this.getAttendanceLogList()
    },
    monthChange(type, date){
      this.getlist(dayjs(date).format('YYYY-MM'))
    }
  },
};
</script>
<style lang="scss" scoped>
.mycheckwork {
  background: #f5f5f5;
  margin: 30rpx;

  .legend {
    border-radius: 16rpx;
    margin: 30rpx 0;
    background: #fff;
    padding: 24rpx 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .legendItem {
      padding: 16rpx;
      font-size: 24rpx;
      color: #1d232e;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      .dot {
        width: 16rpx;
        height: 16rpx;
        display: inline-block;
        margin-right: 20rpx;
        border-radius: 50%;
      }
    }
  }
  .checkList{
    padding-bottom: 30rpx;
  }
  .calendars {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .card {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 32rpx 24rpx;
    position: relative;
    box-shadow: 0 4rpx 24rpx #e6e6e6;
  }

  .card-row {
    display: flex;
    align-items: flex-start;
  }

  .card-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;

    .icon {
      display: block;
      margin-top: 12rpx;
      text-align: center;

      .uv-icon {
        align-items: center;
        flex-direction: column;
      }
    }
  }

  .card-icon .sun {
    font-size: 32rpx;
    display: inline-block;
    width: 32rpx;
    height: 32rpx;
    color: #ffc300;
  }

  .card-info {
    flex: 1;
    margin-left: 18rpx;
  }

  .card-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
  }

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
  }

  .card-time {
    font-size: 24rpx;
    color: #bbb;
    margin-left: 12rpx;
  }

  .card-tag {
    font-size: 24rpx;
    color: #21c97a;
    background: #e6f7f0;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    margin-left: 18rpx;
  }

  .card-detail {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #555;
    margin-top: 12rpx;
  }

  .card-detail .iconfont {
    font-size: 18rpx;
    color: #bbb;
    margin-right: 8rpx;
  }
}
</style>